<!--
 * @Author: g05047
 * @Date: 2023-04-14 15:22:29
 * @LastEditors: g05047
 * @LastEditTime: 2023-07-18 13:14:53
 * @Description: file content
-->
<template>
  <div class="content">
    <div style="margin-bottom: 10px">
      <el-row :gutter="10">
        <el-col :span="10">
          <h3 style="margin: 0" v-if="currentCameraTitle === ''">请选择摄像头</h3>
          <h3 style="margin: 0" v-else>
            当前观看： {{ currentCameraTitle }} &nbsp;实时监控画面
          </h3>
        </el-col>
        <el-col :span="11">
          <el-date-picker
            size="small"
            style="width: 100%"
            v-model="selectedTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :picker-options="setDisabled"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="playback">查看回放</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="iframe">
     
      <iframe id="iframe-content" :src="iframeUrl"></iframe>
    </div>
  </div>
</template>
<script>
import { previewURLs, playbackURLs } from "@/api/cadre.js";

export default {
  props: {
    cameraTittle: {
      type: String,
      default: "",
    },
    currentCameraTitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      nowPlayVideoUrl: "",
      myPlyer: null,
      selectedTimeRange: [
        new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate(),
          0,
          0
        ),
        new Date(),
      ],
      cameraIndexCode: "",
      indexCode: "",
      iframeUrl: "",
      setDisabled: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
         
        },
      },
    };
  },
  //页面加载
  created() {}, // 页面加载完成
  mounted() {
   
  }, //实例销毁之前
  beforeDestroy() {
  
  }, //实例销毁后
  destroyed() {},
  methods: {
    playback() {
      if (this.selectedTimeRange.length === 0) {
        return this.$message.error("请先选择时间段");
      }

      if (this.indexCode === "") {
        return this.$message.error("未选择摄像头");
      }

      this.getPlaybackURLs();
    },

 

    async getPreviewURLs(val) {
      try {
      
        this.indexCode = val;
        const res = await previewURLs({
       
          indexCode: val,
          netZoneCode: "2",
          transmode: 1,
          streamType: 0,
          protocol: "ws",
          expireTime: 300,
        });
     

        if (res.code === "0") {
         

          this.iframeUrl = "http://58.211.227.180:9005/video?indexCode=" + res.data.url;
         
          console.log("iframeUrl", this.iframeUrl);
        }
      } catch (err) {
        console.log(err);
      }
    },

  

    async getPlaybackURLs() {
      try {
        const res = await playbackURLs({
          // cameraIndexCode: this.cameraIndexCode,
          cameraIndexCode: this.indexCode,
          beginTime: new Date(this.selectedTimeRange[0]).toISOString(),
          endTime: new Date(this.selectedTimeRange[1]).toISOString(),
          recordLocation: "0",
          protocol: "ws",
          needReturnClipInfo: true,
          uuid: "",
          expand: "transCode=0",
        });

        if (res.code === "0") {
        

          this.iframeUrl =
            this.iframeUrl =
              "http://58.211.227.180:9005/video?indexCode=" +
              res.data.url.replaceAll("&", "@");
        
        }
      } catch (err) {
        console.log(err);
      }
    },
  }, //方法
  watch: {
   
  }, //监听属性
  computed: {}, //计算属性
};
</script>
<style lang="scss" scoped>
.content {
  height: 546px;
  padding: 110;
  #iframe-content {
    margin: 0px;
    float: left;
    width: 100%;
    // height: 100%;
    height: 480px;
    // position: absolute;
    // top: 0;
    border: medium none;
    background-color: black;
  }
}

.video-js {
  width: 100%;
  height: 480px;
}
</style>
